<template>

  <el-container>
    <div class="background"></div>
    <workbenchNavBar class="workbenchNavBar"></workbenchNavBar>
    <div class="main_footer">
      <keep-alive>
        <workbenchMain></workbenchMain>
      </keep-alive>
      <el-footer height="40px">
        <workbenchFooter></workbenchFooter>
      </el-footer>
    </div>
  </el-container>
</template>

<script>
  import workbenchMain from './main.vue'
  import workbenchNavBar from './NavBar.vue'
  import workbenchFooter from './Footer.vue'

  export default {
    data() {
      return {

      };
    },
    methods: {

    },
    components: {
      workbenchMain,
      workbenchNavBar,
      workbenchFooter
    },
    computed: {

    },
  }
</script>

<style scoped>
  .el-footer {
    background-color: rgba(129, 129, 129, 0.5);
  }

  .background {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(84, 92, 100, 0);
    margin: 0px;
    padding: 0px;
    top: 0;
    width: 100%;
    height: 120vh;
    position: fixed;
    z-index:-1;
  }

  .workbenchNavBar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  .main_footer {
    margin-top: 5vh;
    width: 100%;
    height: 95vh;
    overflow: auto;
  }

  @media screen and (max-width: 768px) {
    .title {
      width: 100%;
      background-position-x: center;
      background-position-y: 0;
    }
  }
</style>
